import React,{useState} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography, Form,Upload,Button } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './Welcome.less';
import request from '@/utils/request';
const CodePreview = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);


export default () => {
  const [img,setImg] = useState()
  const intl = useIntl();
  const normFile = (e) => {
    return e.file
  }
  const onFinish = async(value) =>{
    const form =  new FormData();
    form.append('pic',img)
    form.append('name','acv')
    const res = await request('/api/tablelist/',{method:'post',data:form}) 
  }
  return (
    <PageContainer>
      <Card>
        <Alert
          message={intl.formatMessage({
            id: 'pages.welcome.alertMessage',
            defaultMessage: 'Faster and stronger heavy-duty components have been released.',
          })}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <Typography.Text strong>
          <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />{' '}
          <a
            href="https://procomponents.ant.design/components/table"
            rel="noopener noreferrer"
            target="__blank"
          >
            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
        <Typography.Text
          strong
          style={{
            marginBottom: 12,
          }}
        >
          <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="Advanced layout" />{' '}
          <a
            href="https://procomponents.ant.design/components/layout"
            rel="noopener noreferrer"
            target="__blank"
          >
            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
      </Card>
      <Form
        name='1'
        onFinish={onFinish}
      >
        <Form.Item
          label="图片上传"
          name="upload"

          valuePropName="file"
          getValueFromEvent={normFile}
          extra="请选择图片进行上传"
          rules={[{ required: true, message: '不得上传少于一张商品图片' }]}
        >
          <Upload listType="picture" beforeUpload={file => setImg(file)}>
            <Button >点击进行上传</Button>
          </Upload>
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>

      </Form>
    </PageContainer>
  );
};
